<template>
  <div class="mobile_box">
    <div class="title_box">
      <el-icon><close-bold /></el-icon>
      <h3 class="title_r">签到活动标题</h3>
    </div>
    <div class="content_box">
      <div class="header">
        <div class="header_avatar"><el-avatar :size="45"> user </el-avatar></div>
        <div class="text_box">
          <div class="user_info">
            <p class="user_name">王燕子</p>
            <p class="user_desc">您已连续签到<span style="color: #ff6b00">0</span>天</p>
          </div>
          <div class="text_right">
            <img class="text_ringht_img" src="@/assets/smartMarketing/calendar_icon.png" alt="" />
            签到
          </div>
        </div>
      </div>
      <div class="caleandar_box">
        <el-calendar ref="calendar">
          <template #header="{ date }">
            <div class="time_btn_box">
              <el-icon @click="selectDate('prev-month')"><arrow-left /></el-icon>
              <span>{{ date }}</span>
              <el-icon @click="selectDate('next-month')"><arrow-right /></el-icon>
              <div @click="selectDate('today')" class="today_box">回到今天</div>
            </div>
          </template>
          <template #dateCell="{ data }">
            <span class="isDateColor">{{ getDate(data) }}</span>
          </template>
        </el-calendar>
      </div>
      <div class="content_footer">
        <el-tabs class="tabs_box">
          <!-- 签到奖励 -->
          <el-tab-pane>
            <template #label>
              <span style="display: inline-block; font-size: 18px">签到奖励</span>
            </template>
            <el-scrollbar height="300px">
              <div class="content_prize" v-for="item in props.formInfo.sign_config" :key="item.stage_name">
                <el-image v-if="item.prize_type == 1" style="width: 60px; height: 60px; margin-right: 10px; font-size: 65px" :src="item.entity.prize_url" fit="cover"
                  ><template #error
                    ><div>
                      <el-icon><icon-picture /></el-icon>
                    </div> </template
                ></el-image>
                <img v-else style="width: 60px; height: 60px; margin-right: 10px" src="@/assets/smartMarketing/red_envelope.png" alt="" />
                <div class="content_prize_text">
                  <div v-if="item.prize_type == 1" class="prize_name">{{ item.entity.prize_title }}</div>
                  <template v-else>
                    <div v-if="item.red_bao.red_envelope_type == 1" class="prize_name">{{ item.red_bao.red_envelope_money || 0 }} 元红包</div>
                    <!-- <div v-else class="prize_name">{{ `${item.red_bao.red_envelope_money}-${item.red_bao.red_envelope_range_total}` }} 元拼手气红包</div> -->
                    <div v-else class="prize_name">拼手气红包</div>
                  </template>
                  <div class="prize_name">
                    {{ props.formInfo.sign_type == 1 ? '连续' : '累计' }}签到{{ item.sign_days || 0 }}天，已完成 <span style="color: #ff6b00">{{ item.sign_days || 0 }}</span> /{{ item.sign_days || 0 }}
                  </div>
                </div>
                <div class="content_prize_btn">已领取</div>
              </div>
            </el-scrollbar>
          </el-tab-pane>
          <!-- 排行榜 -->
          <el-tab-pane>
            <template #label>
              <span style="display: inline-block; font-size: 18px">签到排行榜</span>
            </template>
            <el-scrollbar height="300px">
              <div class="content_prize" v-for="(item, index) in 5" :key="item">
                <div class="left_info">
                  <div class="ranking">
                    <img v-if="index == 0" src="@/assets/smartMarketing/champion_icon.png" alt="" />
                    <img v-if="index == 1" src="@/assets/smartMarketing/runnerUp_icon.png" alt="" />
                    <img v-if="index == 2" src="@/assets/smartMarketing/secondRunnerUp_icon.png" alt="" />
                    <div v-if="index > 2" class="ranking_t">{{ index + 1 }}</div>
                  </div>
                  <el-avatar class="avatar" :size="30"> user </el-avatar>
                  <div class="content_prize_text">王燕子</div>
                </div>
                <div style="color: #774a1c; font-size: 16px"> 连续签到<span style="color: #ff6b00">73天</span> </div>
              </div>
            </el-scrollbar>
          </el-tab-pane>
          <!-- 历史奖励 -->
          <!-- <el-tab-pane>
            <template #label>
              <span style="display: inline-block; font-size: 18px">历史奖励</span>
            </template>
            <el-scrollbar height="300px">
              <div class="content_prize" v-for="i in 10">
                <el-image style="width: 60px; height: 60px; margin-right: 10px; font-size: 65px" src="" fit="cover"
                  ><template #error
                    ><div>
                      <el-icon><icon-picture /></el-icon>
                    </div> </template
                ></el-image>
                <div class="content_prize_text">
                  <div>奖励名称</div>
                  <div>连续签到2天，获得红包</div>
                </div>
                <div class="content_prize_btn">已领取</div>
              </div>
            </el-scrollbar>
          </el-tab-pane> -->
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, defineProps } from 'vue'
  import { Picture as IconPicture } from '@element-plus/icons-vue'
  interface Props {
    formInfo: any
  }
  const props = withDefaults(defineProps<Props>(), {
    formInfo: () => []
  })
  const calendar = ref()
  const selectDate = (val: string) => {
    calendar.value.selectDate(val)
  }
  console.log(props.formInfo)

  const getDate = (val: string) => {
    const newDate = val.day.split('-')
    return newDate[2]
  }
</script>

<style lang="scss" scoped>
  :deep .el-calendar-table .el-calendar-day {
    width: 60px;
    height: 30px;
  }
  :deep .el-calendar-table td {
    border: none;
  }
  :deep .el-calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .isDateColor {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    font-size: 14px;
    // color: #fff;
    // background: #ff6b00;
  }
  .DateColor {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    font-size: 14px;
    // color: #fff;
    // background: #cfcccf;
  }
  :deep .el-tabs__nav-scroll {
    padding: 0 60px;
  }
  .mobile_box {
    width: 414px;
    height: 840px;
    padding: 16px;
    border-radius: 25px;
    border: 1px solid #d2d8db;
    background-color: #f3fafb;

    .title_box {
      display: flex;
      align-items: center;
      height: 44px;
      padding-left: 11px;
      background: #ffffff;
      border-radius: 1px;
      border: 1px solid #f5f5f5;
      .title_r {
        flex: 1;
        text-align: center;
      }
    }
    .content_box {
      padding: 20px 16px;
      background: #f8f8f8;
      background-image: url('@/assets/smartMarketing/signIn_bg.png');
      background-repeat: no-repeat;
      background-position: 50% -100px;
      .header {
        display: flex;
        .header_avatar {
          margin-right: 10px;
        }
        .text_box {
          flex: 1;
          display: flex;
          justify-content: space-between;
          .user_info {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 5px 0;

            font-size: 14px;
            .user_name {
              font-weight: 600;
              color: #603400;
            }
            .user_desc {
              color: #603400;
            }
          }
          .text_right {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 86px;
            height: 32px;
            background: #ff6b00;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.6);
            font-family: STHeitiSC-Medium, STHeitiSC;
            font-size: 14px;
            font-weight: 500;
            color: #ffffff;
            .text_ringht_img {
              width: 17px;
              height: 17px;
              margin-right: 5px;
              vertical-align: middle;
            }
          }
        }
      }
      .caleandar_box {
        margin-top: 20px;
        background: #ffffff;
        padding: 3px;
        border-radius: 8px;
        .time_btn_box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex: 1;
          padding-left: 70px;
          .el-icon {
            color: #603400;
          }
          .today_box {
            padding: 3px;
            border-radius: 3px;
            font-size: 11px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            cursor: pointer;
            color: #ffd34e;
            background-color: #fff4d4;
            line-height: 16px;
          }
        }
      }

      .content_footer {
        margin-top: 20px;
        border-radius: 8px 8px 0px 0px;
        color: #FF6B00;
        background-color: #FFFFFF;
        :deep(.el-tabs__header) {
          background: #FFF8E1;
          border-radius: 8px 8px 0px 0px;
        }
        :deep(.el-tabs__nav-wrap::after) {
          height: 1px;
          background: #F5F5F5;
        }

        .content_prize {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0 16px;
          padding: 16px 0;

          line-height: 20px;
          background-color: #fff;
          border-bottom: 1px solid #f5f5f5;
          .left_info {
            display: flex;
            align-items: center;
            .ranking {
              width: 20px;
              height: 25px;
              img {
                width: 100%;
                height: 100%;
              }
              .ranking_t {
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                background: #f5f5f5;
                border-radius: 50%;
              }
            }
            .avatar {
              margin: 0 10px;
            }
            .content_prize_text {
            }
          }

          .content_prize_btn {
            width: 76px;
            height: 30px;
            display: flex;
            border-radius: 4px;
            justify-content: center;
            align-items: center;
            color: #fff;
            background-color: #cccccc;
          }
        }
      }
    }
  }
  .tabs_box {
    :deep .el-tabs__item {
      margin: 0 15px;
    }
  }
  .prize_name {
    font-size: 12px;
    width: 200px;
    height: 25px;
    padding-top: 5px;
  }
</style>
